<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Demo - Validform - 一行代码搞定整站的表单验证！ &copy;瑞金佬的前端路</title>
<link rel="stylesheet" href="demo/css/style.css" type="text/css" media="all" />
<link href="demo/css/demo.css" type="text/css" rel="stylesheet" />
</head>

<body>  
<div class="header">
    <div class="wraper">
    	<h1><a href="http://validform.rjboy.cn">Validform</a></h1>
        <ul class="nav">
            <li><a href="http://validform.rjboy.cn/">关于Validform</a></li>
            <li><a href="demo.html" class="current">Demo</a></li>
            <li><a href="document.html">文档</a></li>
            <li><a href="help.html">帮助</a></li>
            <li><a href="http://validform.rjboy.cn/?p=1">网友讨论</a></li>
        </ul>
    </div>
</div>

<div class="main">
    <div class="wraper">
        <h2 class="green">Validform常用功能示例</h2>
        
        <h3>基本功能</h3>
        <ul class="lireset2 mb22">
        	<li><a href="demo_normal_autotip.html">智能的提示信息</a> <sup class="green">5.3+</sup></li>
        	<li><a href="demo_normal_regexp.html">给表单元素绑定验证类型和提示文字</a></li>
            <li><a href="demo_normal_btnSubmit.html">给表单下的任一对象绑定提交表单或重置方法</a> <sup class="green">5.0+</sup></li>
        	<li><a href="demo_normal_tipmsg.html">修改默认的提示文字，如默认弹出框的标题，验证成功后的提示文字等</a> <sup class="green">5.0+</sup></li>
             <li><a href="demo_normal_recheck.html">检测重复密码是否与第一次输入的密码一致</a></li>
            <li><a href="demo_normal_showAllError.html">逐条验证与一次验证显示所有错误信息</a></li>
            <li><a href="demo_normal_ajaxPost.html">使用ajax的方式提交表单</a> <sup class="green">5.0+</sup></li>
            <li><a href="demo_normal_postonce.html">让表单只能提交一次，提交成功后再提交表单将不会有操作</a> <sup class="green">5.0+</sup></li>
            <li><a href="demo_normal_ignore.html">在表单元素有输入时才验证，没有输入时不验证</a></li>
            <li><a href="demo_normal_username.html">Validform实现用户名的实时验证</a></li>
            <li><a href="demo_normal_andeither.html">dataype实现规则累加或单选</a> <sup class="green">5.2+</sup></li>
        </ul>
        
        <h3>进阶功能</h3>
        <ul class="lireset2 mb22">
        	<li><a href="demo_normal_notable.html">Validform没有限定只能使用table布局，任何结构都是可以的</a> <sup class="green">5.0+</sup></li>
        	<li><a href="demo_normal_datatype.html">传入自定义的datatype，可以满足你几乎所有的验证需求</a></li>
            <li><a href="demo_normal_datatype_errormsg.html">在自定义datatype中返回具体的错误信息</a> <sup class="green">5.0+</sup></li>
            <li><a href="demo_normal_callback.html">仅用Validform做验证，验证成功后调用自己的方法提交表单</a> <sup class="green">5.0+</sup></li>
            <li><a href="demo_normal_validformObject.html">使用Validform对象</a> <sup class="green">5.0+</sup></li>
        </ul>
        
        <h3>常见的一些验证效果</h3>
        <ul class="lireset2 mb22">
            <li><a href="demo_normal_eitheror.html">二选一的验证，如电话号码与手机号码只需其中之一有输入</a> <sup class="green">5.0+</sup></li>
            <li><a href="demo_normal_datatype_idcard.html">通过自定义datatype对身份证号码进行严格验证</a> <sup class="green">5.0+</sup></li>
            <li><a href="demo_normal_datatype_maxmin.html">通过自定义datatype验证最多或至少选择n项</a> <sup class="green">5.0+</sup></li>
            <li><a href="demo_normal_ignoreHidden.html">分类选择，选择了其中一类就忽略其他类的验证</a> <sup class="green">5.0+</sup></li>
        </ul>
        
    	<h2 class="green">提示效果 <span class="gray">- 可以实现几乎任何你想要的提示效果</span></h2>
        <ul class="lireset2 mb22">
        	<li><span class="gray">提示效果一：</span><a href="demo_tiptype_pop.html">弹出框提示</a></li>
            <li><span class="gray">提示效果二：</span><a href="demo_tiptype_sidetip.html">右侧提示</a></li>
            <li><span class="gray">提示效果三：</span><a href="demo_tiptype_onfocus.html">Focus时右侧出现提示文字</a> <sup class="green">5.0+</sup></li>
            <li><span class="gray">提示效果四：</span><a href="demo_tiptype_sideNonePop.html">【自定义提示效果】右侧提示，ajax提交时不弹出提示层</a></li>
            <li><span class="gray">提示效果五：</span><a href="demo_tiptype_fixPosition.html">【自定义提示效果】固定位置显示提示信息</a></li>
            <li><span class="gray">提示效果六：</span><a href="demo_tiptype_tipCustom.html">【自定义提示效果】使用自定义弹出框</a></li>
            <li><span class="gray">提示效果七：</span><a href="demo_tiptype_onfocusFadeIn.html">【自定义提示效果】让提示信息滑入显示</a> <sup class="green">5.0+</sup></li>
        </ul>
        
        <h2 class="green">外调插件</h2>
        
        <h3>文件上传 - swfupload <span class="red">[需要服务器环境]</span> <a href="http://demo.swfupload.org/Documentation" target="_blank" class="blue ml10 fz12">去官网查看详细使用方法&raquo;</a></h3>
        <ul class="lireset2 mb22">
        	<li><a href="demo_usePlugin_uploadAtOnce.html">选择文件后立即上传</a></li>
        	<li><a href="demo_usePlugin_uploadWhenValid.html">表单验证通过后上传文件</a></li>
        </ul>
        
        <h3>密码强度检测 - passwordStrength</h3>
        <ul class="lireset2 mb22">
        	<li><a href="demo_usePlugin_strengthAlways.html">密码强度提示与验证提示同时显示</a></li>
        	<li><a href="demo_usePlugin_strengthNeeded.html">在符合验证要求时才有密码强度提示</a></li>
        </ul>
        
        <h3>日期控件 - datePicker</h3>
        <ul class="lireset2 mb22">
        	<li><a href="demo_usePlugin_datePickerDefault.html">默认效果</a></li>
        	<li><a href="demo_usePlugin_datePickerCallback.html">选择日期后执行回调函数</a></li>
        </ul>
        
        <h3>表单美化 - jqtransform</h3>
        <ul class="lireset2 mb22">
        	<li><a href="demo_usePlugin_jqtransformDefault.html">默认对所有元素美化</a> <sup class="green">5.0+</sup></li>
        	<li><a href="demo_usePlugin_jqtransformAssign.html">美化指定的表单元素</a> <sup class="green">5.0+</sup></li>
        </ul>
        
    </div>
</div>

<div class="footer">
    <div class="wraper">
        <p class="fl">Copyright &copy; <a href="http://www.eloocor.com" target="_blank">易罗客</a></p>
        <p class="fr"><a href="http://www.rjboy.cn" target="_blank">瑞金佬的前端路</a><b> | </b><a href="http://validform.rjboy.cn">Validform</a><b> | </b><a href="http://www.rjboy.cn/?p=789" target="_blank">hScrollpane</a><b> | </b><a href="http://www.rjboy.cn/?p=708" target="_blank">Xslider</a></p>
    </div>
</div>
</body>
</html>